<template>
<div>
  <el-pagination
    layout="prev, pager, next, sizes"
    :total="search.total"
    :page-sizes="[10, 20, 30]"
    @current-change="sendPage"
    @size-change="sendSize">
  </el-pagination>
</div>
  
</template>

<script>
import {mapState} from 'vuex'
export default {
  // 获取到总数
  computed: {
    ...mapState(['search'])
  },
  methods: {
    sendPage (page) {
      // 把page 提交mutation setSearch
      this.$store.commit('setSearch', {
        page
      })

      // 在分发action请求数据重新渲染
      this.$store.dispatch('getUsers')
    },
    sendSize (pagesize) {
      this.$store.commit('setSearch', {
        pagesize
      })
      this.$store.dispatch('getUsers')
    }
  }
}
</script>

<style>

</style>
